<!DOCTYPE html>
<html lang="zh-CN"> <!-- 页面内容为中文 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML文本与图片标签示例 - lab2-2</title>
</head>

<body>

    <!-- 1. 文本格式化标签应用 -->
    <h1>lab2-2：文本与图片标签实验</h1>

    <h2>1. 文本格式化效果</h2>
    <p>这是一个普通段落（<code>&lt;p&gt;</code>标签），可嵌套以下格式化标签：</p>

    <ul>
        <li>强调文本：<strong>加粗（<code>&lt;strong&gt;</code>，语义：重要内容）</strong></li>
        <li>轻微强调：<em>斜体（<code>&lt;em&gt;</code>，语义：强调语气）</em></li>
        <li>高亮标记：<mark>高亮文本（<code>&lt;mark&gt;</code>，用于突出关键信息）</mark></li>
        <li>上下标：H<sub>2</sub>O（下标）、2<sup>3</sup>=8（上标）</li>
        <li>文本修改：<del>删除线（<code>&lt;del&gt;</code>，表示已删除内容）</del>、<ins>下划线（<code>&lt;ins&gt;</code>，表示新增内容）</ins></li>
        <li>代码展示：<code>let x = 10;</code>（<code>&lt;code&gt;</code>，单行代码）</li>
        <li>引用内容：<blockquote>“HTML是网页的骨架，语义化是骨架的灵魂。”（<code>&lt;blockquote&gt;</code>，块级引用）</blockquote></li>
        <li>预格式化文本（<code>&lt;pre&gt;</code>，保留空格和换行，适合多行代码）：
            <pre>
                预格式化文本（&lt;pre&gt;）
                保留空格和
                换行。
            </pre>
        </li>
    </ul>
    <hr> <!-- 水平线标签，用于分割内容区块 -->



    <!-- 2. 图片与超链接标签应用 -->
    <h2>2. 图片与超链接</h2>
    <p>（1）图片嵌入（<code>&lt;img&gt;</code>，自闭合标签，需指定src和alt）：</p>
    <!-- 方式1：本地图片（需在同级文件夹放一张名为"html-logo.png"的图片） -->
    <img src="html-logo.png" alt="HTML5官方Logo" width="250" title="HTML5 Logo（悬停显示）">
    <!-- 方式2：网络图片（无需本地文件，直接用URL） -->
    <img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="HTML5网络Logo" width="200" title="HTML5网络Logo">



    <p>（2）超链接（<code>&lt;a&gt;</code>，需指定href，控制跳转目标）：</p>
    <ul>
        <li>跳转到外部网站：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" rel="noopener">MDN HTML文档（新标签页打开，target="_blank"）</a></li>
        <li>跳转到页面内部锚点：<a href="#top">回到页面顶部（href="#id"，需给目标元素加id="top"）</a></li>
        <li>下载文件：<a href="HTML5参考手册.pdf" download>下载HTML5参考手册（download属性，需同级有该文件）</a></li>
    </ul>



    <!-- 给页面顶部加锚点id -->
    <div id="top"></div>
    <hr>实验小结：
    <br>1. 核心实现
    <br>完成文本格式化与媒体标签的综合应用：通过<strong>（加粗强调）</strong>、<em>（斜体语气）</em>、<mark>（高亮）</mark>、<code>（代码）</code>、<blockquote>（引用）</blockquote>等标签实现文本语义化呈现；通过<img>标签嵌入本地 / 网络图片（指定src路径、alt替代文本、title悬停提示）；通过<a>标签实现外部跳转（target="_blank"新标签页）、内部锚点（href="#top"回顶部）、文件下载（download属性）功能。
    <br>2. 关键认知
    <br>文本标签的核心是 “语义优先”—— 如<strong>表示 “重要内容” 而非仅 “加粗样式”</strong>，<em>表示 “语气强调” 而非仅 “斜体样式”</em>；图片标签中alt属性是可访问性关键（视障用户屏幕阅读器依赖其识别图片内容）；超链接rel="noopener"可避免新标签页对原页面的安全影响，需作为规范使用。
</body>
</html>